<template>
    <div class="content-main">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/teacher/index' }">实训案例</el-breadcrumb-item>
                <el-breadcrumb-item>学生虚机配置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="content-box">
            <div class="search-box">
                <div class="search-item">
                    <span class="search-title">班级: </span>
                    <el-select
                        v-model="classValue"
                        placeholder="请选择班级"
                        value-key="value"
                        style="float:left;">
                        <el-option
                        v-for="item in classStatus"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="search-item">
                    <span class="search-title">案例: </span>
                    <el-select
                        v-model="projectValue"
                        placeholder="请选择案例"
                        value-key="value"
                        style="float:left;">
                        <el-option
                        v-for="item in projectStatus"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="search-item">
                    <span class="search-title">身份: </span>
                    <el-input v-model="identity" placeholder="请输入身份" style="float:left; width:auto;"></el-input>
                </div>
                <div class="search-item">
                    <span class="search-title">学生/教师信息: </span>
                    <el-input v-model="info" placeholder="请输入学生/教师信息" style="float:left; width:auto;"></el-input>
                </div>
                <div class="search-item">
                    <el-button type="primary">搜索</el-button>
                </div>
                <div class="search-item" style="float:right; margin:0;">
                    <el-button type="primary" @click="deleteList">解除</el-button>
                </div>
            </div>
            <div class="table-content" v-loading="tableLoading">
                <el-table
                :data="tableData"
                ref="multipleTable"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange">
                    <el-table-column type="selection">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名">
                    </el-table-column>
                    <el-table-column prop="jobNumber" label="学号/工号">
                    </el-table-column>
                    <el-table-column prop="identity" label="身份">
                    </el-table-column>
                    <el-table-column prop="class" label="班级">
                    </el-table-column>
                    <el-table-column prop="project" label="案例">
                    </el-table-column>
                    <el-table-column prop="status" label="状态">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="lookFn">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="totalCount"
                    style="margin-top: 20px; text-align: center;">
                </el-pagination>
            </div>
            <el-dialog title="虚机详情" :visible.sync="dialogFormVisible">
                <el-form :model="form" ref="form" label-width="90px">
                    <el-form-item label="姓 名 :" style="width: 50%; float:left;">
                        <el-input type="text" disabled v-model="form.name" style="width: 80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="身 份 :" style="width: 50%; float:left;">
                        <el-input type="text" disabled v-model="form.identity" style="width: 80%;"></el-input>
                    </el-form-item>
                     </el-form-item>
                    <el-form-item label="班 级 :" style="width: 50%; float:left;">
                        <el-input type="text" disabled v-model="form.class" style="width: 80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="工 号 :" style="width: 50%; float:left;">
                        <el-input type="text" disabled v-model="form.jobId" style="width: 80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="案  例 :" style="width: 50%; float:left;">
                        <el-input type="text" disabled v-model="form.project" style="width: 80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="分配类型 :" style="width: 50%; float:left;">
                        <el-input type="text" disabled v-model="form.type" style="width: 80%;"></el-input>
                    </el-form-item>
                </el-form>
                <el-table
                :data="tableData2"
                border
                style="width: 100%">
                    <el-table-column prop="name" label="姓名">
                    </el-table-column>
                    <el-table-column prop="ip" label="学号/工号">
                    </el-table-column>
                    <el-table-column prop="cpu" label="身份">
                    </el-table-column>
                    <el-table-column prop="neicun" label="班级">
                    </el-table-column>
                    <el-table-column prop="status" label="状态">
                    </el-table-column>
                </el-table>
                <div slot="footer" class="dialog-footer" style="text-align:center;">
                    <el-button type="primary" @click="submitForm('form')">保存</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            //手机号验证
            var validPhone = (rule, value,callback)=>{
                if (!value){
                    callback(new Error('请输入电话号码'))
                }else  if (!isvalidPhone(value)){
                    callback(new Error('请输入正确的11位手机号码'))
                }else {
                    callback()
                }
            }
            return {
                projectStatus: [
                    {
                        value: 3,
                        label: '全部'
                    },
                    {
                        value: 1,
                        label: '已分配'
                    },
                    {
                        value: 0,
                        label: '未分配'
                    }
                ],
                projectValue: 3,
                classStatus: [
                    {
                        value: 3,
                        label: '全部'
                    },
                    {
                        value: 1,
                        label: '已分配'
                    },
                    {
                        value: 0,
                        label: '未分配'
                    }
                ],
                classValue: 3,
                identity: '',
                info: '',
                tableLoading: false,
                tableData: [
                    {
                        name: '张AA',
                        jobNumber: '2017121313',
                        identity:'教师',
                        class: '计算机科学2班',
                        project: '分布式计算框架',
                        status: '运行'
                    }
                ],
                currentPage:1,
                pagesize:10,
                totalCount: 1000,
                multipleSelection: [],
                tableData2: [
                    {
                        name: '张AA',
                        ip: '192.168.255.360',
                        cpu: '处理器上限',
                        neicun: '内存上限',
                        status: '运行'
                    }
                ],
                dialogFormVisible: false,
                form: {
                    name: '',
                    identity: '',
                    class: '',
                    jobId: '',
                    project: '',
                    type: ''
                }
            }
        },
        created () {
        },
        methods: {
        }
    }
</script>
